<template>
    <div>
        <h1>老师展示</h1>
    <div>

        <table border="1">
            <tr>
                <th>id</th>
                <th>老师</th>
            </tr>
            <tr v-for="stu in stu_list" :key="stu.id">
                <td>{{stu.id}}</td>
                <td><router-link :to="{'path':'/stu_show',query:{'id':stu.id}}">{{stu.name}}</router-link></td>
            </tr>
        </table>
        <br>
         <button @click="up">上一页</button>
        <button v-for="p in page_list" :key="p" @click="jum(p)">{{p}}</button>
        <button @click="down">下一页</button>
      </div>

    </div>
</template>

<script>
import axios from 'axios'
export default {
    data() {
        return {
            num:1,
            stu_list:[],
            page_list:[],
            page_sum:0,
            bath_url:'http://127.0.0.1:8000'
        }
    },
    methods: {
        down(){
            if(this.num<=this.page_sum){
                this.num ++
                this.get_stu()
            }
        },
        up(){
            if(this.num>1){
                this.num --
                this.get_stu()
            }
        },
        jum(p){
            this.num = p
            this.get_stu()
        },
        get_stu(){
            axios.get( this.bath_url + '/app01/login?num='+this.num).then(res=>{
                console.log(res.data)
                this.stu_list = res.data.data
                this.page_list= res.data.page_list
                this.page_sum = res.data.page_sum
            })    
        },
    },
    created() {
        this.get_stu()

    }
}
</script>

<style>
table{
    width: 500px;
    /* height: 500px;  */
    border: solid black;
    margin: 0 auto;
    border-collapse:collapse
}
th,td{
    border: green solid;
    border-collapse:collapse
}
a{
    padding: 5px 10px;
    border: 1px solid lightblue;
    margin-right: 10px;
    cursor: pointer;
}
</style>